// 权限控制

// 页面权限筛选
// 1. 掉接口获取页面权限信息
// 2. 拆分动态路由(有权限才能看见的页面)
// 3. 根据权限信息筛选路由 (最复杂了)
// 4. 利用addRoute动态拼接路由
// 5. 解决菜单不出现的问题(路由配置对象没有响应式) 结合vuex实现了菜单根据数据动态渲染
import router from './router'
import store from '@/store'
import { asyncRoutes } from './router/asyncRoutes'
const WHITE_LIST = ['/login']

// 处理一级路由权限数据
function getFirstRoutePerms(permsArr) {
  const newArr = permsArr.map(item => {
    return item.split(':')[0]
  })
  return [... new Set(newArr)]
}

// 处理二级路由权限数据
function getSecondRoutePerms(permsArr) {
  const newArr = permsArr.map(item => {
    const arr = item.split(':')
    return `${arr[0]}:${arr[1]}`
  })
  return [...new Set(newArr)]
}

// 根据路由权限筛选路由表
function getRoutes(firstRoutePerms, secondRoutePerms, asyncRoutes) {
  // 如果是超级管理员直接返回所有路由
  if (firstRoutePerms[0] === '*') {
    return asyncRoutes
  }
  // 1. 根据一级路由筛选
  const routes = asyncRoutes.filter(route => {
    return firstRoutePerms.includes(route.permission)
  })

  const routes1 = routes.map(item => {
    // const obj = {}
    // obj.a = item.a
    // obj.b = item.b
    // obj.children = item.children.filter(item => secondRoutePerms.includes(item.permission))
    // return obj
    return {
      ...item,
      children: item.children.filter(item => secondRoutePerms.includes(item.permission))
    }
  })

  return routes1
}

router.beforeEach(async(to, from, next) => {
  const token = store.state.user.token
  if (token) {
    // 有token 代表用户登录成功了
    next()
    // 获取用户信息
    if (!store.state.user.profile.id) {
      // 获取权限列表 actions内返回了permisions 直接使用 省的再去从vuex获取一遍
      const permisions = await store.dispatch('user/getProfile')
      console.log(permisions, '我是权限信息')
      // 一级路由权限
      const firstRoutePerms = getFirstRoutePerms(permisions)
      const secondRoutePerms = getSecondRoutePerms(permisions)
      console.log('一级路由信息', firstRoutePerms)
      console.log('二级路由信息', secondRoutePerms)
      // 筛选路由
      const routes = getRoutes(firstRoutePerms, secondRoutePerms, asyncRoutes)
      console.log('最终路由表', routes)
      // 路由动态添加
      routes.forEach(route => {
        router.addRoute(route)
      })
      // 调用mutations存动态路由到vuex当中
      store.commit('menu/setMenuList', routes)
    }
  } else {
    if (WHITE_LIST.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
})
